const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    poster: '', // 海报图片路径
    fontSetSize: 'small', // 用户设置的字体大小（'small'：小，'middle'：中，'large'：大）
    personalInfo: {}, // 用户个人资料
    avatarPath: '', // 用户头像路径
    avatarWidth: 55, // 用户头像宽度
    avatarHeight: 55, // 用户头像高度
    avatarToLeft: 18, // 在canvas上放置用户头像的 x 坐标位置
    avatarToTop: 15, // 在canvas上放置用户头像的 y 坐标位置
    avatarInfo: {}, // 用户头像的基本信息
    qrcodePath: '', // 海报二维码图片路径
    qrcodeWidth: 80, // 海报二维码宽度
    qrcodeHeight: 80, // 海报二维码高度
    qrcodeInfo: {}, // 海报二维码的基本信息
    posterPath: '', // 海报图片路径
    canvasWidth: '', // canvas宽度
    canvasHeight: '', // canvas高度
    posterToLeft: 0, // 在canvas上放置海报的 x 坐标位置
    posterToTop: 0, // 在canvas上放置海报的 y 坐标位置
    posterInfo: {}, // 海报图片的基本信息
    posterDownload: false, // 海报当前是否处于下载状态
    continuity_date: 0, // 用户打卡天数
    imgProportion: 1, // 图片占canvas画布宽度百分比
    today: '', // 今天日期
  },

  /**
   * 获取用户个人资料
   */
  getPersonalInfo () {
    let that = this
    let token = wx.getStorageSync('token')
    app.http({
      config: {
        url: '/api/User/personal_info',
        data: {
          token
        },
        method: 'POST'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'personalInfoRes')
      let avatarPath = res.data.data.avatar
      that.setData({
        personalInfo: res.data.data,
        continuity_date: res.data.data.continuity_date
      })
      // 获取图片基本信息
      wx.getImageInfo({
        src: avatarPath,
        success: function(response) {
          // console.log(response)
          that.setData({
            avatarInfo: response,
            avatarPath: response.path
          })
        }
      })
    }).catch(err => {
      console.log(err, 'personalInfoErr')
    })
  },

  getQrcode () {
    let that = this
    let token = wx.getStorageSync('token')
    app.http({
      config: {
        url: '/api/User/qrcode',
        data: {
          token
        },
        method: 'POST'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'qrcodeRes')
      let qrcodePath = res.data.data
      // 获取图片基本信息
      wx.getImageInfo({
        src: qrcodePath,
        success: function(response) {
          console.log('qrcode', response)
          that.setData({
            qrcodeInfo: response,
            qrcodePath: response.path
          })
        }
      })
    }).catch(err => {
      console.log(err, 'qrcodeErr')
    })
  },

  /**
   * 获取海报
   */
  getPoster () {
    let that = this
    let token = wx.getStorageSync('token')
    app.http({
      config: {
        url: '/api/User/poster',
        data: {
          token
        },
        method: 'GET'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'posterRes')
      this.setData({
        poster: res.data.data
      })

      // 获取图片基本信息
      wx.getImageInfo({
        src: res.data.data,
        success: function(response) {
          // console.log(response)
          that.setData({
            posterInfo: response,
            posterPath: response.path,
            // canvasWidth: response.width,
            canvasHeight: (response.height / response.width * that.data.canvasWidth)
          })
        }
      })

    }).catch(err => {
      console.log(err, 'posterErr')
    })
  },

  /**
   * 绘制海报
   */
  drawImage() {
    let that = this
    // 海报背景图基本信息
    let posterInfo = that.data.posterInfo
    let posterPath = that.data.posterPath
    // 用户头像基本信息
    let avatarInfo = that.data.avatarInfo
    let avatarPath = that.data.avatarPath
    /* // 海报二维码基本信息
    let qrcodeInfo = that.data.qrcodeInfo
    let qrcodePath = that.data.qrcodePath */
    // 计算海报宽高（宽度固定，高度等比缩放）
    let posterWidth = that.data.canvasWidth * that.data.imgProportion
    let posterHeight = posterInfo.height / posterInfo.width * posterWidth
    /* let qrcodeToLeft = posterWidth - (that.data.qrcodeWidth + 18) // 在canvas上放置海报二维码的 x 坐标位置
    let qrcodeToTop = posterHeight - (that.data.qrcodeHeight + 60) // 在canvas上放置海报二维码的 y 坐标位置 */
    // 获取canvas对象
    let ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('#FFFFFF') // 设置canvas背景色, 否则制作的图片是透明的
    ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight) // 背景色填充满整个画布
    ctx.drawImage(posterPath, 0, 0, posterInfo.width, posterInfo.height, that.data.posterToLeft, that.data.posterToTop, posterWidth, posterHeight) // 先绘制海报背景图，撑满整个画布
    console.log('posterPath', posterPath)
    console.log('posterInfo.width', posterInfo.width)
    console.log('posterInfo.height', posterInfo.height)
    console.log('that.data.posterToLeft', that.data.posterToLeft)
    console.log('that.data.posterToTop', that.data.posterToTop)
    console.log('posterWidth', posterWidth)
    console.log('posterHeight', posterHeight)

    // ctx.drawImage(qrcodePath, 0, 0, qrcodeInfo.width, qrcodeInfo.height, qrcodeToLeft, qrcodeToTop, that.data.qrcodeWidth, that.data.qrcodeHeight) // 绘制海报二维码
    ctx.font = '15px normal PingFang-SC-Regular' // 设置字体
    ctx.fillStyle = '#363636' // 设置字体颜色
    ctx.textAlign = 'left' // 设置字体水平对齐方式
    ctx.textBaseline = 'top' // 设置字体垂直对齐方式
    // ctx.fillText(that.data.today, 92, 50) // 绘制第一行文字，日期（参数：要写的字，x坐标，y坐标）
    ctx.fillText(that.data.today, 92, 18) // 绘制第一行文字，日期（参数：要写的字，x坐标，y坐标）
    ctx.font = '18px bold PingFang-SC-Regular' // 设置字体
    // ctx.fillText(`坚持打卡第${that.data.continuity_date}天`, 92, 76) // 绘制第二行文字，打卡天数（参数：要写的字，x坐标，y坐标）
    ctx.fillText(`坚持打卡第${that.data.continuity_date}天`, 92, 40) // 绘制第二行文字，打卡天数（参数：要写的字，x坐标，y坐标）
    ctx.arc(46, 36, 27, 0, 2 * Math.PI, false) // 设定一个圆形裁剪区域
    ctx.strokeStyle = 'transparent' // 设置绘制圆形边框的颜色为透明，不然会有黑色边框
    ctx.stroke() // 绘制圆形裁剪区域
    ctx.clip() // 裁剪圆形区域
    ctx.drawImage(avatarPath, 0, 0, avatarInfo.width, avatarInfo.height, that.data.avatarToLeft, that.data.avatarToTop, that.data.avatarWidth, that.data.avatarHeight) // 在裁剪出来的圆形区域绘制用户头像
    ctx.restore() // 恢复之前保存的绘图上下文
    ctx.draw()
  },

  /**
   * 下载海报
   */
  handleDownloadPoster () {
    let that = this
    wx.showLoading({
      title: '保存中',
      mask: true
    })
    that.setData({
      posterDownload: true
    })
    let timer = setTimeout(() => {
      clearTimeout(timer)
      this.drawImage()
    }, 10)
    let timers = setTimeout(() => {
      clearTimeout(timers)
      let canvasWidth = this.data.canvasWidth
      let canvasHeight = this.data.canvasHeight
      let posterDestWidth = canvasWidth * 3
      let posterDestHeight = canvasHeight * 3
      wx.canvasToTempFilePath({
        x: 0, // 指定的画布区域的左上角横坐标
        y: 0, // 指定的画布区域的左上角纵坐标
        width: canvasWidth, // 指定的画布区域的宽度
        height: canvasHeight, // 指定的画布区域的宽度
        destWidth: posterDestWidth, // 输出的图片的宽度，画布宽度 * dpr
        destHeight: posterDestHeight, // 输出的图片的高度，画布高度 * dpr
        canvasId: 'myCanvas',
        success: function(res) {
          //console.log(res.tempFilePath) // 生成的临时图片路径
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function(res) {
              //console.log(res);
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
              })
            },
            fail: function(err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: modalSuccess => {
                    wx.openSetting({
                      success(settingdata) {
                        //console.log("settingdata", settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击图片即可保存',
                            showCancel: false,
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限失败，图片无法保存到相册',
                            showCancel: false,
                          })
                        }
                      },
                      fail(failData) {
                        //console.log("failData", failData)
                      },
                      complete(finishData) {
                        // console.log("finishData", finishData)
                      }
                    })
                  }
                })
              }
            },
            complete(res) {
              wx.hideLoading()
              that.setData({
                posterDownload: false
              })
            }
          })
        }
      })
    }, 500)
    
  },

  /**
   * canvas转换成图片
   */
  // handleCanvarToImg() {
  //   let that = this
  //   let canvasWidth = that.data.canvasWidth
  //   let canvasHeight = that.data.canvasHeight
  //   let posterDestWidth = canvasWidth * 3
  //   let posterDestHeight = canvasHeight * 3
  //   wx.canvasToTempFilePath({
  //     x: 0, // 指定的画布区域的左上角横坐标
  //     y: 0, // 指定的画布区域的左上角纵坐标
  //     width: canvasWidth, // 指定的画布区域的宽度
  //     height: canvasHeight, // 指定的画布区域的宽度
  //     destWidth: posterDestWidth, // 输出的图片的宽度，画布宽度 * dpr
  //     destHeight: posterDestHeight, // 输出的图片的高度，画布高度 * dpr
  //     canvasId: 'myCanvas',
  //     success: function(res) {
  //       console.log(res, 111)
  //       that.setData({radarImg: res.tempFilePath})
  //     }
  //   });
  // },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    that.getPersonalInfo()
    that.getPoster()
    // that.getQrcode()
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          canvasWidth: res.windowWidth,
          canvasHeight: res.windowHeight
        })

        // 根据图片比例, 使图片居中
        let posterToLeft = (res.windowWidth * (1 - that.data.imgProportion)) / 2
        that.setData({
          posterToLeft
        })
      }
    })
    let time = new Date()
    let year = time.getFullYear()
    let month = time.getMonth() + 1
    let date = time.getDate()
    let today = `${year}年${month}月${date}日`
    that.setData({
      today
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let fontSetSize = wx.getStorageSync('fontSetSize') // 本地缓存中用户设置的字体大小
    if (fontSetSize) {
      this.setData({
        fontSetSize
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面转发按钮
      console.log(res.target, res)
    }
    return {
      title: '海报',
      path: 'pages/index_poster/index_poster'
    }
  }
})